<!-- 煤场管理 -->
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElLoading, type FormInstance } from 'element-plus'
interface InState {
    /** 编辑新增时选择的煤场 */
    currentBunker: FuelBunkerTRecord;
}
/** 数据 */
let state = ref<InState>({
    currentBunker: new FuelBunkerTRecord({})
});
//table-list
const tableHeight = ref(0)
// 定义表格数据的类型
interface TableRow {
    id: number;
    time: string;
    name: string;
    name1: string;
}
const listTableData = ref([])

// 保存选中项的 ID 列表
const selectedRowIds = ref<Set<number>>(new Set());

// 处理选中项变化的函数
const handleSelectionChange = (selection: TableRow[]) => {
    // 更新选中项 ID 列表
    selectedRowIds.value = new Set(selection.map((item) => item.id));
};

// 自定义行类名的函数
const rowClassName = ({ row }: { row: TableRow }): string => {
    return selectedRowIds.value.has(row.id) ? 'selected-row' : '';
};
const rowInfoClassName = (id: number) => {
    return selectedRowIds.value.has(id) ? 'selected_bg' : '';
}

// 新增
const addDialogVisible = ref(false)
const addForm = ref({
    bid: '',
    areaName: '',
    areaCode: '',
    fid: '',
    areaDes: '',
    maxValue: '',
    minValue: '',
    radioVal: ''
})
const changeRadio = () => {
    console.log(addForm.value.radioVal)
    const parts = addForm.value.radioVal.split('-');
    addForm.value.minValue = parts[0]
    addForm.value.maxValue = parts[1]
}


// 修改
const editDialogVisible = ref(false)
const editForm = ref({
    bid: '',
    areaName: '',
    areaCode: '',
    fid: '',
    areaDes: '',
    maxValue: '',
    minValue: '',
    radioVal: ''
})
const changeEditRadio = () => {
    console.log(editForm.value.radioVal)
    const parts = editForm.value.radioVal.split('-');
    editForm.value.minValue = parts[0]
    editForm.value.maxValue = parts[1]
}


import { FuelAreaList, addFuelArea, editFuelArea, delFuelArea, FuelAreaInfo, GetAllBunkerData, AllFuelTypeList } from "@/api";
import { FuelBunkerTRecord } from '@/api/Bunker';

// 煤场
const bunkerData = ref<FuelBunkerTRecord[]>([])
const getGetAllBunkerData = () => {
    GetAllBunkerData().then(res => {
        console.log('BunkerData-------', res.data)
        bunkerData.value = res.data
    })
}
// 煤炭种类
const fuelTypeData = ref<any>([])
const getAllFuelTypeList = () => {
    AllFuelTypeList().then(res => {
        console.log('fuelType-------', res.data)
        fuelTypeData.value = res.data
    })
}

// 搜索
const searchForm = ref({
    bid: '',
    areaName: '',

    PageNum: 1, //当前页码
    PageSize: 10 //PageSize
})
const totalPage = ref(0)

const searchFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    searchForm.value.PageNum = 1
    postFuelAreaList()
}
//list
const postFuelAreaList = () => {
    console.log('searchForm-------', searchForm.value)
    FuelAreaList(searchForm.value).then(res => {
        console.log('list-------', res.data)
        listTableData.value = res.data.result
        totalPage.value = res.data.totalNum
    })
}

//新增
const postAddFuelArea = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            addFuelArea(addForm.value).then(res => {
                console.log('新增----', res)
                if (res.code === 200) {
                    ElMessage({
                        type: 'success',
                        message: '添加成功',
                    })
                    addDialogVisible.value = false
                    addForm.value = {
                        bid: '',
                        areaName: '',
                        areaCode: '',
                        fid: '',
                        areaDes: '',
                        maxValue: '',
                        minValue: '',
                        radioVal: ''
                    }
                    postFuelAreaList()
                }
                else {
                    ElMessage.error(res.msg)
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })

}

// 删除
const clickDelFuelArea = (id: number) => {
    ElMessageBox.confirm(
        '是否确定删除，删除后不能恢复?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
        .then(() => {
            delFuelArea(id).then(res => {
                console.log('删除----', res)
                if (res.code === 200) {
                    ElMessage({
                        type: 'success',
                        message: '已成功删除',
                    })
                    postFuelAreaList()
                }
                else {
                    ElMessage.error('删除失败，请重新删除')
                }
            })
        })
}

//修改
const postEditFuelArea = () => {
    console.log('editForm----', editForm.value)
    editFuelArea(editForm.value).then(res => {
        console.log('修改----', res)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            editDialogVisible.value = false
            postFuelAreaList()
        }
        else {
            ElMessage.error(res.msg)
        }
    })
}

const editDialogShow = (data: any) => {
    console.log(data)
    editForm.value = data
    editForm.value.radioVal = data.minValue + '-' + data.maxValue
    state.value.currentBunker = bunkerData.value.find(item => item.bunkerId?.toString() == data.bid) ?? new FuelBunkerTRecord({});
    editDialogVisible.value = true
}

// 批量删除
const batchDel = () => {
    if (selectedRowIds.value.size == 0) {
        ElMessage.error('请先选择要批量删除的数据')
    }
    else {
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        let ids: string = Array.from(selectedRowIds.value).join(', ');
        delFuelArea(ids).then(res => {
            console.log('删除----', res)
            loading.close()
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                postFuelAreaList()
            }
            else {
                ElMessage.error('删除失败，请重新删除')
            }
        })
    }
}
// <el-button type="primary" color="#2565C8" @click="batchDel">批量删除</el-button>

const ruleFormRef = ref<FormInstance>()

const rules = ref({
    bid: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    areaName: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    areaCode: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    radioVal: [
        { required: true, message: '请输入', trigger: 'blur' },
    ]
})
/** 切换煤场 */
function changeBunkerType() {
    addForm.value.radioVal = "";
    state.value.currentBunker = bunkerData.value.find(item => item.bunkerId?.toString() == addForm.value.bid) ?? new FuelBunkerTRecord({});
}
onMounted(() => {
    // 获取页面高度
    tableHeight.value = window.innerHeight - 310;
    getGetAllBunkerData()
    getAllFuelTypeList()
    postFuelAreaList()
});


</script>
<template>
    <!-- 弹出框/新增 -->
    <el-dialog v-model="addDialogVisible" title="新增煤场分区" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form ref="ruleFormRef" :rules="rules" :inline="true" :model="addForm" class="mt15 form-inline-row-two" label-width="115">
                <el-form-item label="所属煤场:" prop="bid">
                    <el-select v-model="addForm.bid" placeholder="请选择" @change="changeBunkerType">
                        <el-option v-for="(item, index) in bunkerData" :label="item.bunkerName" :value="item.bunkerId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="煤场分区名称:" prop="areaName">
                    <el-input v-model="addForm.areaName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="煤场分区编码:" prop="areaCode">
                    <el-input v-model="addForm.areaCode" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="存储煤种:">
                    <el-select v-model="addForm.fid" placeholder="请选择">
                        <el-option v-for="(item, index) in fuelTypeData" :label="item.ftName" :value="item.ftId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="位置描述:" style="width: 93.2%;">
                    <el-input v-model="addForm.areaDes" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="常规区域范围:" prop="radioVal" style="width: 93.2%;">
                    <div class="area_range_radio">
                        <div class="item" v-if="state.currentBunker.bunkerType == '1'">
                            <div class="title">常规区域范围</div>
                            <div class="info">
                                <el-radio-group v-model="addForm.radioVal" @change="changeRadio">
                                    <el-radio value="0-60">0°-60°</el-radio>
                                    <el-radio value="60-120">60°-120°</el-radio>
                                    <el-radio value="120-180">120°-180°</el-radio>
                                    <el-radio value="180-240">180°-240°</el-radio>
                                    <el-radio value="240-360">240°-360°</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                        <div class="item" v-else>
                            <div class="title">常规区域范围</div>
                            <div class="info">
                                <el-radio-group v-model="addForm.radioVal">
                                    <el-radio value="X-(0-50m)">X-(0-50m)</el-radio>
                                    <el-radio value="X-(50-100m)">X-(50-100m)</el-radio>
                                    <el-radio value="X-(100-150m)">X-(100-150m)</el-radio>
                                    <el-radio value="X-(150-200m)">X-(150-200m)</el-radio>
                                    <el-radio value="X-(200-250m)">X-(200-250m)</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <!-- <el-form-item label="自定义区域范围:" style="width: 93.2%;">
                    <div class="area_range_3d">
                        <img class="ph"src="../../assets/img/ph_3d.jpg" alt="">
                    </div>
                </el-form-item> -->

            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="postAddFuelArea(ruleFormRef)">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/新修改 -->
    <el-dialog v-model="editDialogVisible" title="修改煤场分区" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form :inline="true" :model="editForm" class="mt15 form-inline-row-two" label-width="115">
                <el-form-item label="所属煤场:">
                    <el-select v-model="editForm.bid" placeholder="请选择" @change="changeBunkerType">
                        <el-option v-for="(item, index) in bunkerData" :label="item.bunkerName" :value="item.bunkerId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="煤场分区名称:">
                    <el-input v-model="editForm.areaName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="煤场分区编码:">
                    <el-input v-model="editForm.areaCode" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="存储煤种:">
                    <el-select v-model="editForm.fid" placeholder="请选择">
                        <el-option v-for="(item, index) in fuelTypeData" :label="item.ftName" :value="item.ftId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="位置描述:" style="width: 93.2%;">
                    <el-input v-model="editForm.areaDes" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="常规区域范围:" style="width: 93.2%;">
                    <div class="area_range_radio">
                        <div class="item" v-if="state.currentBunker.bunkerType == '1'">
                            <div class="title">常规区域范围</div>
                            <div class="info">
                                <el-radio-group v-model="editForm.radioVal" @change="changeEditRadio">
                                    <el-radio value="0-60">0°-60°</el-radio>
                                    <el-radio value="60-120">60°-120°</el-radio>
                                    <el-radio value="120-180">120°-180°</el-radio>
                                    <el-radio value="180-240">180°-240°</el-radio>
                                    <el-radio value="240-360">240°-360°</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                        <div class="item" v-else>
                            <div class="title">常规区域范围</div>
                            <div class="info">
                                <el-radio-group v-model="editForm.radioVal">
                                    <el-radio value="X-(0-50m)">X-(0-50m)</el-radio>
                                    <el-radio value="X-(50-100m)">X-(50-100m)</el-radio>
                                    <el-radio value="X-(100-150m)">X-(100-150m)</el-radio>
                                    <el-radio value="X-(150-200m)">X-(150-200m)</el-radio>
                                    <el-radio value="X-(200-250m)">X-(200-250m)</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <!-- <el-form-item label="自定义区域范围:" style="width: 93.2%;">
                    <div class="area_range_3d">
                        <img class="ph" src="../../assets/img/ph_3d.jpg" alt="">
                    </div>
                </el-form-item> -->

            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="postEditFuelArea">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>

    <div class="search_bor_bg">
        <el-form ref="searchFormRef" :inline="true" :model="searchForm" class="from_search_inline" label-width="100">
            <el-form-item label="煤场名称:" prop="bid">
                <el-select v-model="searchForm.bid" placeholder="请选择">
                    <el-option v-for="(item, index) in bunkerData" :label="item.bunkerName" :value="item.bunkerId" />
                </el-select>
            </el-form-item>
            <el-form-item label="煤场分区名称:" prop="areaName">
                <!-- <el-select v-model="searchForm.areaName" placeholder="请选择">
                    <el-option label="煤场类型1" value="1" />
                    <el-option label="煤场类型2" value="2" />
                </el-select> -->
                <el-input v-model="searchForm.areaName" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" color="#2565C8" @click="postFuelAreaList">搜索</el-button>
                <el-button style="padding:0 8px;" @click="resetForm(searchFormRef)">
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="box_bg mt15">
        <div class="record_set">
            <el-button type="primary" color="#2565C8" @click="addDialogVisible = true">新增</el-button>
            <el-button type="primary" color="#2565C8" @click="batchDel">批量删除</el-button>
        </div>
        <div class="table_list mt15">
            <el-table class="custom-table" :data="listTableData" size="large" :border="false" :stripe="false" :highlight-current-row="false"
                :height="tableHeight" style="width: 100%;" :row-class-name="rowClassName" ref="multipleTableRef" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" align="right" />
                <el-table-column label="煤场名称" prop="bid">
                    <template #default="scope">
                        <span v-for="item in bunkerData" :key="item.bunkerId">
                            <span v-if="item.bunkerId == scope.row.bid">{{ item.bunkerName }}</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="煤场分区名称" prop="areaName" />
                <el-table-column label="煤场分区编码" prop="areaCode" />
                <el-table-column label="煤种" prop="fid">
                    <template #default="scope">
                        <span v-for="item in fuelTypeData" :key="item.ftId">
                            <span v-if="item.ftId == scope.row.fid">{{ item.ftName }}</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="位置描述" prop="areaDes" />
                <el-table-column align="center" label="操作" min-width="120">
                    <template #default="scope">
                        <div class="table_btn">
                            <a href="javascript:;" @click="clickDelFuelArea(scope.row.id)">删除</a>|
                            <a href="javascript:;" @click="editDialogShow(scope.row)">修改</a>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="searchForm.PageNum" v-model:page-size="searchForm.PageSize" @current-change="postFuelAreaList"
                :total="totalPage" background layout="prev, pager, next" />
        </div>

    </div>

</template>
<style scoped lang="scss">
.area_range_radio {
    border: 1px solid #E0E5ED;
    width: 100%;
    border-radius: 5px;
    display: flex;
    align-items: stretch;
    // justify-content: space-around;
    padding: 15px 0;

    .item {
        width: 250px;

        box-sizing: border-box;

        .info {
            background: #F6FAFE;
            padding: 10px 30px;
        }

        .title {
            font-size: 15px;
            color: #3B4552;
            line-height: 24px;
            text-align: center;
            padding-bottom: 10px;
        }
    }
}

.area_range_3d {
    border: 1px solid #E0E5ED;
    width: 100%;
    border-radius: 5px;
    background: #F7FBFC;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;

    .ph {
        width: 300px;
        height: 300px;
        object-fit: cover;
    }
}

::v-deep(.el-table__body-wrapper) {
    background: #F6FAFE !important;
}

::v-deep(.el-table__inner-wrapper:before) {
    display: none; //下边线
}

::v-deep(.el-table thead th) {
    color: #333 !important;
    background: #CCDDF9;
}

::v-deep(.el-table__body) {
    border-spacing: 0px 13px !important;
}

::v-deep(.el-table__row td) {
    border-top: 1px solid #E0E5ED !important;
    border-bottom: 1px solid #E0E5ED !important;
}

::v-deep(.el-table__row td:first-child) {
    border-left: 1px solid #E0E5ED !important;
}

::v-deep(.el-table__row td:last-child) {
    border-right: 1px solid #E0E5ED !important;
}

::v-deep(.el-table__row:hover td) {
    background: #ecf5ff !important;
}

::v-deep(.el-table__expanded-cell) {
    border: 1px solid #E0E5ED !important;
    padding: 0 !important;
    //border-top: none !important; 
}

// ::v-deep(.el-table__expanded-cell td){
//     background: #ecf5ff!important;
// }
::v-deep(.el-table__expanded-cell:hover) {
    background-color: #ecf5ff !important;
}

::v-deep(.el-table__row.selected-row td) {
    background: #FFDE9A !important;
}
</style>
